<template>
	<view class="background">
		<view class="search-dian">
			<view class=" iconfont icon-magnifier"></view>
			<input class="search-input" placeholder="请输入搜索内容" placeholderColor="#B3B3B3" />
		</view>

		<IndexSwiper></IndexSwiper>

		<!-- 优惠专区和攻略 -->
		<view class="youhui-gonglue">
			<!-- 优惠专区 -->
			<view class="youhui">
				<text class="youhui-text" @click="gotoyouhui(youhui)">优惠专区</text>
				<image class="youhui-image" src="../../static/tabbar/youhyui.png"></image>
			</view>

			<!-- 攻略 -->
			<view class="gonglue" @click="strategy">
				<text class="gonglue-text">安心攻略</text>
				<image class="gonglue-image" src="../../static/tabbar/gonglue.png"></image>
			</view>
		</view>

		<!-- 推荐专区 -->
		<view class="tuijiang">----新品推荐----</view>
		<IndexKapiang></IndexKapiang>
	</view>
</template>

<script>
	import IndexSwiper from '../../components/index/IndexSwiper.vue'
	import IndexKapiang from '../../components/index/IndexKapiang.vue'
	export default {
		data() {
			return {

			}
		},
		// 引入组件
		components: {
			IndexSwiper,
			IndexKapiang
		},
		onLoad() {

		},
		methods: {
			gotoyouhui(youhui) {
				uni.navigateTo({
					url: '../youhui/youhui'
				})
			},
			// 前往安心攻略页面
			strategy() {
				uni.navigateTo({
					url: '../strategy/index'
				})
			}
		}
	}
</script>

<style scoped>
	/* 顶部搜索框部分开始 */
	.search-dian {
		display: flex;
		align-items: center;
		/* 保持图标和输入框垂直居中 */
		padding: 10rpx;
	}

	.icon-magnifier {
		position: absolute;
		/* 使用绝对定位来放置图标 */
		left: 15px;
		/* 调整图标位置 */
		z-index: 1;
		/* 确保图标在输入框之上 */
	}

	.search-input {
		background-color: #F7F7F7;
		flex-grow: 1;
		/* 允许输入框扩展以填充可用空间 */
		margin-right: 10px;
		/* 输入框与搜索按钮之间的间隔 */
		padding-left: 40px;
		/* 为图标腾出空间 */
		position: relative;
		/* 为图标提供定位上下文 */

		border: 1px solid yellowgreen;
		/* 添加圆角 */
		border-radius: 15px;
		/* 添加阴影效果 */
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	}

	/* 页面背景 */
	.background {
		background-image: url("https://b-ssl.duitang.com/uploads/item/201406/24/20140624173037_eJd2t.thumb.700_0.jpeg");
		/* 覆盖整个背景区域 */
		background-size: cover;
		/* 背景图片居中显示 */
		background-position: center;
	}

	/* 优惠专区和攻略 */
	.youhui-gonglue {
		display: flex;
		justify-content: space-around;
		margin: 15px 10px;
	}

	.youhui,
	.gonglue {
		display: flex;
		align-items: center;
		border: 1px solid yellowgreen;
		/* 添加圆角 */
		border-radius: 10px;
		/* 添加阴影效果 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		/* 添加内边距 */
		padding: 10px;
	}

	.youhui-text {
		font-size: 26px;
		color: red;
	}

	.gonglue-text {
		font-size: 26px;
		color: deepskyblue;
	}

	.youhui-image,
	.gonglue-image {
		width: 30px;
		height: 30px;
	}

	.tuijiang {
		text-align: center;
		margin-top: 20px;
		margin-bottom: 3px;
		font-size: 18px;
		color: yellowgreen;

	}
</style>